import { useSearchParams } from 'react-router-dom'
import NavBar from '../../components/Navbar'
import React, { useEffect, useState } from 'react'
import './index.less'
import appSdk from '../../utils/app_sdk'

const TitleEnum = {
  realname: '实名认证须知',
  homeowner: `${window.baseConfig.package_name}派对房主协议`,
  1: '实名认证须知',
  2: `${window.baseConfig.package_name}派对房主协议`
}

function Protocol() {
  const params = useSearchParams()[0]
  // const [type, setType] = useState(TitleEnum[params.get('type')] || '')

  const ProtocolDom = {
    realname: <RealName />,
    homeowner: <Homeowner />,
    1: <RealName />,
    2: <Homeowner />
  }

  useEffect(() => {
    document.title = TitleEnum[String(params.get('type'))]
  }, [params])

  return (
    <div className="protocol_wrap">
      <NavBar title={TitleEnum[String(params.get('type'))]} />
      <div className="protocol_content">{ProtocolDom[String(params.get('type'))]}</div>
    </div>
  )
}

const RealName = () => {
  return (
    <div className="real_name">
      <div className="tit">一、认证须知</div>
      <div className="data">
        <p>1.实名认证用于优化用户在平台的观看内容和体验，并作为找回账号等账号信息的凭证，请谨慎填写。</p>
        <p>2.一个身份证最多用于1个{window.baseConfig.package_name}账号的实名认证*该认证仅支持中国内地 (不含港澳台地区)的用户</p>
        <p>3.实名认证信息提交并认证通过后，不可修改。</p>
        <p>4.超过一定天数未实名认证或实名认证被认定为未成年人的用户讲无法使用部分功能。</p>
      </div>
      <div className="tit">二、账号安全</div>
      <div className="data">
        <p>
          1.请用户妥善保管自己的账号和密码，加强密码安全性，谨防账号泄露或被盗，用户对由自己账号登入系统后所发生的所有活动和事件负责，并承担由此产生的直接或者间接法律责任。用户承诺不会借用、租用、冒用、盗用
        </p>
        <p>
          2.他人的信息为自己信息或以他人名义注册{window.baseConfig.package_name}账号，不会借用、租用、冒用、盗用他人的
          {window.baseConfig.package_name}账号。
        </p>
        <p>
          3.非因{window.baseConfig.package_name}原因导致用户账号被泄露或被盗而造成的任何法律后果由用户负责，{window.baseConfig.package_name}
          不承担任何责任。
        </p>
      </div>
    </div>
  )
}

const Homeowner = () => {
  const [isBottom, setIsBottom] = useState(false)
  useEffect(() => {
    const box1 = document.querySelector('.box1')
    const io = new IntersectionObserver((mutations) => {
      const box1Status = mutations[0].isIntersecting
      if (!isBottom && box1Status) {
        setIsBottom(true) // 只触发一下
      }
    })
    io.observe(box1)
  })

  const click = () => {
    if (isBottom) {
      appSdk('agreeCreateRoomProtocol')
      appSdk('closeWebview')
    }
  }

  return (
    <div className="homeowner_wrap">
      <div className="data">
        {' '}
        本协议是该社交平台（以下简称“本平台”）和派对房主（以下称“房主”或“贵方”）所约定的规范双方权利和义务的具有法律效力的电子协议，下称“本协议”。除非贵方与本平台另有其他约定，贵方与本平台之间的权利和义务均适用本协议。贵方勾选“我同意”，即表示贵方已经仔细阅读、充分理解并完全地毫无保留地接受本协议的所有条款。
      </div>
      <div className="tit">第一条 总则</div>
      <div className="data">
        <p>
          1、贵方根据本平台注册要求及规则，在本平台上申请成为本平台派对房主，在本平台进行语音或文字群聊活动（以下简称“群聊”或“群聊活动”），可使用本平台提供的服务进行唱歌、演讲、朗诵或其他以语音和文字为载体的娱乐活动。本平台有权独立决定是否给予贵方房主资格。
        </p>
        <p>
          2、签署本协议前，贵方已充分了解本平台之各项规则及要求，且有条件及有能力、资格履行本协议约定的房主职责及义务。本协议对贵方构成有效的、带有约束力的、可强制执行的法定义务，贵方对本协议下所有条款及定义等内容均已明确知悉，并无疑义。
        </p>
        <p>
          3、贵方承诺并声明在本平台派对内的所有行为符合所在地法律的相关规定，不得以履行本协议名义从事其他违反中国及所在地法律规定的行为。
        </p>
      </div>
      <div className="tit">第二条 本平台权利义务</div>
      <div className="data">
        <p>
          1、本平台有权制定平台运营制度及对房主的管理规则，有权对贵方进行管理和监督，有权根据运营情况对相应规则做出调整或变更，贵方对此表示理解、同意和接受，并服从本平台的统一管理。
        </p>
        <p>
          2、本平台有权对贵方进行考察、评判，以确立（取消）对贵方的奖励或处罚，具体考察项目及标准由本平台另行制定，无需额外征得贵方同意。如本平台希望与贵方进行深入合作的，可由双方进行友好协商另行签订正式的合作协议。
        </p>
        <p>
          3、派对房间的所有权归属本平台所有，贵方完成注册申请且经本平台审核通过后，获得派对的使用权。派对仅限于您本人使用，禁止赠与、转让、出借、出租或售卖。贵方理解并同意，本平台有权随时收回派对。
        </p>
        <p>
          {' '}
          4、本平台有权对贵方的派对提出改进建议和意见，贵方应在收到本平台的建议和意见后，按照本平台的要求进行相应的整改，否则本平台根据平台规则处理。
        </p>
        <p>
          5、本平台为确保房主身份真实性，要求贵方提交身份证和面部特征等生物识别信息（均属于个人敏感信息）来完成必要的实人认证。上述信息仅用于验证用户身份的真实性。本平台会采用行业领先的技术来保护贵方提供的个人信息，并使用加密方式避免其被用于其他用途。
        </p>
        <p>6、本平台对贵方进行的群聊活动拥有最终决定权和解释权。</p>
      </div>
      <div className="tit">第三条 贵方权利义务</div>
      <div className="data">
        <p>
          1、贵方应当使用真实身份信息及个人资料，不得以虚假、冒用的居民身份信息、企业注册信息、组织机构代码信息进行注册并认证，若贵方的个人资料有任何变动，贵方应及时更新。若贵方为自然人，贵方须年满18周岁。贵方承诺不会因执行本协议损害任何第三方合法利益，贵方接受并履行本协议不违反任何对你有约束力的法律文件，亦不会使本平台对任何第三方承担任何责任。
        </p>
        <p>
          2、贵方在群聊活动过程中，应保障自己的人身安全及财产安全，如贵方在群聊过程中，导致贵方或任何第三方遭受任何损害的，贵方应独立承担责任，本平台因此遭受损失的，贵方应当一并赔偿。
        </p>
        <p>
          3、贵方承诺群聊必须用作本协议约定的群聊或本平台根据平台发展需要而增加的其他业务用途，不得用于其他任何非本平台允许的活动（包括但不限于不得提供广告、推介等服务，或从事任何违法行为）
        </p>
        <p className="line">
          4、贵方开展本协议项下的群聊活动事项和在本平台上发布的所有信息／资讯／言论／内容等均不得含有任何违反中华人民共和国有关法律、法规及规定的内容，包括但不限于危害国家安全、淫秽色情、虚假、违法、诽谤（包括商业诽谤）、非法恐吓或非法骚扰、侵犯他人知识产权、人身权、商业秘密，或其他合法权益以及有违公序良俗的内容或指向这些内容的链接。
        </p>
        <p className="line">
          5、贵方有责任监督所属派对内的用户有无违规行为（包括但不限于言语辱骂，广告，涉黄，涉赌，涉政等行为）若有违规行为应及时制止与举报。若贵方未及时制止违规用户，本平台有权利对贵方派对实施不同程度的处罚措施。
        </p>
        <p>
          6、贵方承诺积极维护本平台及本平台形象，贵方不会做出有损于本平台及／或本平台形象或利益的行为，本协议期内及协议终止后，贵方不会通过任何渠道（包括但不限于网站、博客、微博、微信、聊天群、房主粉丝聚会等）暗示或发布不利于本平台及／或本平台的言论。
        </p>
        <p>
          7、未经本平台书面同意，贵方不得在任何场合以任何形式（包括但不限于文字、口播、视频贴片等）提及或露出第三方品牌的相关信息，发布的内容不得含有商业性质的信息。贵方不得引导或为本平台现有用户、其他房主及本平台员工进入其他第三方竞品平台提供任何信息或便利，包括但不限于提供联络上的协助、进行说服工作等。
        </p>
      </div>
      <div className="tit">第四条 协议的构成、变更、终止</div>
      <div className="data">
        <p>
          1、本协议内容同时包括本协议、《用户协议》以及本平台可能不时发布的其他相关协议、规则、声明、政策等内容。上述内容一经正式发布，即成为本协议不可分割的组成部分，贵方同样应当遵守。本平台有权在必要时单方变更、终止、中止本协议或上述内容，并在相关页面进行通知，变更后的协议或相关内容一旦在相关的页面上公布即有效代替原来的协议或内容。本协议条款或相关内容变更后，如贵方继续在本平台进行群聊活动，即视为贵方已知悉并接受变更后的协议和相关内容。如贵方不同意本平台对本协议或相关内容所作的任何变更，贵方应立即停止在本平台进行的任何群聊活动。
        </p>
        <p>2、请遵守平台派对房相关协议行为准则，请勿在房间内做出下列违规行为，否则平台有权视情况，采取相应处罚措施：</p>
        <p className="indent">
          （1）请勿在派对房间内发布涉及政治有害、违法违纪、任何低俗色情、暗示擦边及冒充官方、买卖钻石等违规言论，违者将被封号处罚；
        </p>
        <p className="indent">
          （2）请勿在派对房间内发布血腥暴力、低俗相关、谩骂引战、第三方平台引流、交易等广告言论，违者将被禁言或禁止进入派对；
        </p>
        <p className="indent">
          （3）请勿使用上述相关违规的派对名、用户昵称、签名、封面、头像、房间公告，否则房间信息将被重置或强制关闭房间；
        </p>
        <p className="indent">
          （4）房主作为房间管理者，有义务承担维护房间和谐氛围的责任，如房主纵容房间内其他成员违规而未及时制止，平台有权追究房主连带责任，并处相应处罚；
        </p>
        <p className="indent">（5）请勿多次重复作出上述违规行为，否则官方有权累加上调处罚时限，直至账号永久封禁。</p>
        <p className="indent">
          （6）本派对房主行为准则是本平台《社区公约》的组成部分，未尽事宜，参照《社区公约》的相关规定执行。房主在此确认并知悉，在本平台新建派对房间的行为，即构成对该行为准则的接受
        </p>
        <p>3、贵方有下列情形之一，本平台可以立即解除本协议，不需要提前通知：</p>
        <p className="indent">（1）本平台发现贵方违反对本协议所做的声明与承诺</p>
        <p className="indent">（2）因贵方个人行为直接或间接给对本平台利益造成重大损害的</p>
        <p className="indent">（3）引违反国家法律法规的（4）违反本协议规定的其它义务</p>
        <p className="indent">
          （5）以消极、不作为等不符合本平台要求的方式履行本协议的（即使未构成违约）一，经本平台通知后【10】日内仍未改正的；
        </p>
        <p className="indent">
          （6）因异常情形的出现，本平台认为贵方不适合进行本协议下群聊活动，经本平台通知后【10】日内异常情形仍未消除的；
        </p>
        <p className="indent">（7）因本平台业务调整，决定停止本协议所涉及的业务。</p>
      </div>
      <div className="tit">第五条 违约责任</div>
      <div className="data">
        <p>
          1、任何由于贵方声明不实或违反其声明承诺事项导致他方向本平台提起诉讼、索赔及／或导致本平台声誉受损之后果，贵方将承担本平台因此产生的全部直接及间接费用、损失及赔偿，其中包括本平台为诉讼支付的有关费用及律师费、向第三方支付的赔偿帮用等。
        </p>
        <p>2、除本协议另有约定外，贵方违反本协议下任何规定的，本平台有权视情形，采取包括但不限于下列任一种或多种措施追究贵方的违约责任：</p>
        <p className="indent">（1）暂时封停贵方的派对，直至贵方纠正其违约行</p>
        <p className="indent">（2）永久性封停贵方的账号；</p>
        <p className="indent">（3）引永久性删除贵方的账号；</p>
        <p className="indent">（4）拒绝贵方再次注册本平台的账号；</p>
        <p className="indent">（5）本平台因此遭受任何经济、名誉上损失，贵方应予以全额赔偿并负责消除给本平台造成的不良影响；</p>
        <p className="indent">（6）根据本平台运营制度及房主管理规则等其他规定可采取的处理措施。</p>
      </div>
      <div className="tit">第六条 法律适用及争议处理</div>
      <div className="data">
        <p>1、本协议适用中华人民共和国的法律，并且排除一切冲突法规定的适用。</p>
        <p>
          2、因本协议引起的或与本协议有关的争议，双方可协商解决。协商不成的，贵方和本平台一致同意将纠纷提交中国国际经济贸易仲裁委员会，根据其现行有效的仲裁规则讲行仲裁。仲裁庭应由三名仲裁员组成。仲裁裁决是终局的，对双方都有约束力。仲裁费用由败诉一方承担。
        </p>
      </div>
      <div className="tit">第七条 附则</div>
      <div className="data">
        <p>
          1、本平台不行使、未能及时行使或者未充分行使本协议或者按照法律规定所享有的权利，不应被视为放弃该权利，也不影响本平台在将来行使该权利
        </p>
        <p>
          2、如本协议中的任何条款无论因何种原因完全或部分无效或不具有执行力，本协议条款的其余条款仍应有效且具有约束力，本平台及贵方均应尽力使该协议设定的本意得到实现
        </p>
        <p>3、本协议中的标题仅为方便而设，不作为解释本条款的依据。</p>
        <p className="box1">4、如有任何疑问，请在我的一在线客服进行咨询</p>
      </div>
      <div onClick={click} className={`agree_btn ${isBottom ? 'active' : ''}`}>
        {isBottom ? '我已阅读并同意所有内容' : '上滑阅读全文'}
      </div>
    </div>
  )
}

export default Protocol
